<%--
  Created by IntelliJ IDEA.
  User: 李毅
  Date: 2023/8/22
  Time: 8:52
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<c:set var="path" value="${pageContext.request.contextPath }"/>
<html>
<head>
    <title>登录</title>
    <link href="${path}/css/login.css" rel="stylesheet" type="text/css">
</head>
<body>
<script type="text/javascript" rel="script" src="${path}/js/jquery-3.6.4.js"></script>
<div class="de1">
    <div><img src="${path}/images/login/logo.png" class="de2"/></div>
    <div><img src="${path}/images/login/phone.png" class="de3"/></div>
    <form action="YanZhengMobile" method="post" onsubmit="return sub()">
        <div class="de4">
            <p>
                <input type="text" id="mobile" name="phone" placeholder="请输入手机号" onblur="checkPhone()" class="de5"/>
                <span class="de7"><input type="button" value="发送验证码" class="de7" id="btn_mobile_code" onclick="get_mobile_code()"></span>
            </p>
            <p><input type="text" onclick="login()" id="mobile_code" name="mobile_code" placeholder="请输入短信验证码" class="de5"></p>
            <input type="submit"  disabled value="登录" id="submit" class="confirm-btn disable"/>
            <p>
                <input type="checkbox" class="checkInfo disable" id="checkbox" onclick="check(this)"/>
                我已阅读并同意  <span style="color: red;" onclick="jQuery:window.location='serve.jsp'">《猫眼用户服务协议》</span>
                <span style="color: red;" onclick="jQuery:window.location='private.jsp'">《隐私政策》</span>
            </p>
            <p>
                客服电话 <span style="color: red;">1010-5335</span>
            </p>
            <p>
                还没有注册？请<a href="enroll.jsp">注册</a>
            </p>
        </div>
    </form>
</div>

<script type="text/javascript">
    function login(){
        var phone=document.getElementById("mobile");
        if(phone!=null){}
    }
    let flag=false;
    function checkPhone() {
        let mobile=$("#mobile").val();
        $.post("LoginServlet?prom=login","&phone="+mobile,function (result){
            if(result>0){
                flag= true;
            }else{
                flag= false;
            }
        },"text");
        return flag;
    }
    function sub(){
        let className=$(".disable").attr("class");
        let mobile=$("#mobile").val();
        let mobile_code=$("#mobile_code").val();
        if (mobile==""||mobile==null){
            alert("手机号码不能为空！");
            return false;
        }
        if (mobile_code==""||mobile_code==null){
            alert("手机验证码不能为空！");
            return false;
        }
        if(className.length==19){
            alert("请勾选，并已阅读并同意《猫眼用户服务协议》 《隐私政策》");
            return false;
        }
        return true;
    }


    function get_mobile_code() {
        var phone =  $("#mobile").val().trim();
        if(phone==null||phone==""){
            alert("手机号不能为空！");
            return;
        }
        if(checkPhone){
            runTime();
            $.post('MobileCode',{phone:phone},function (msg) {
                if(msg == "2"){
                    alert("发送成功");
                }
            });
        }else {
            alert("改手机号未注册，请重新输入或注册猫眼电影！");
        }
    };

    var time=59;
    var timeout;
    function runTime() {
        document.getElementById("btn_mobile_code").disabled = true;
        if(time > 0){
            document.getElementById("btn_mobile_code").value=time;
            timeout = setTimeout("runTime()",1000);
            time = time-1;
        }else{
            clearTimeout(timeout);
            time=59;
            document.getElementById("btn_mobile_code").value="获取手机验证码";
            document.getElementById("btn_mobile_code").disabled = false;
        }
    }
    function check(a){
        let cssName=$(a).attr("class");
        if(cssName=="checkInfo disable"){
            $(a).attr("class","checkInfo");
            $(".disable").attr("class","confirm-btn");
        }else {
            $(a).attr("class","checkInfo disable");
            $(".confirm-btn").attr("class","confirm-btn disable");
        }
        if ($("#checkbox").attr("checked","true")){
            $("#submit").removeAttr("disabled")
        }
    }
</script>
</body>
</html>
